<template>
	<view class="home">
		<view class="padding-tb-20 padding-lr-30 ">
			<view class="flex align-center">
				<view class="line"></view>
				<view class="flex-one border-bottom-ed"></view>
				<view class="lineactive"></view>
				<view class="flex-one border-bottom-ed"></view>
			</view>
			<view class="flex align-center margin-top-10">
				<view class="flex-one text-28 text-66">01选择门店</view>
				<view class="flex-one text-32 text-bold">02填写联系电话</view>
			</view>
		</view>
		<view class="bg-ff radius-40 padding-30 margin-bottom-40 margin-lr-30 margin-top-20"
			style="box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176,181,185,0.25);">
			<view class="flex align-center width-100p">
				<view class="text-28">* 联系电话</view>
				<input type="number" placeholder="请输入" v-model="phonenumber" class="text-right flex-one margin-left-30"
					maxlength="11" />
				<view class="tyIcon-arrow-right text-24 text-66 margin-left-10"></view>
			</view>
			<button class="phonebtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击授权手机号</button>
			<view class="text-20 text-66 text-center margin-top-20">可手动输入手机号码，或者直接点击授权号码</view>
		</view>
		<view class="bg-ff radius-40 padding-30 margin-bottom-40 margin-lr-30 margin-top-40"
			style="box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176,181,185,0.25);">
			<view class="padding-bottom-20 border-bottom-f7 text-32 text-bold">
				{{name}}
			</view>
			<view class="flex margin-top-25">
				<view class="text-28 text-66">电话</view>
				<view class="text-28 text-bold flex-one text-right">{{tel}}</view>
			</view>
			<view class="flex margin-top-25">
				<view class="text-28 text-66">地址</view>
				<view class="text-28 text-bold flex-one text-right margin-left-30">{{adress}}</view>
			</view>
			<view class="flex margin-top-25">
				<view class="text-28 text-66">活动时间</view>
				<view class="text-28 text-bold flex-one text-right">{{time_range}}</view>
			</view>
		</view>
		<!-- '@click="go('/pages/board/storedetail')"' -->
		<view class="sginbtn" @click="getSgin">立即报名</view>
		<!-- <text class="text-40"
			:class="isAllChoose ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc'"
			@click="chooseAll"></text> -->
		<view class="xytext"> <text @click="isAllChoose=!isAllChoose"
				:class="isAllChoose ? 'tyIcon-round-check' : 'tyIcon-round'" class="text-1a padding-right-10"></text>
			我已阅读并同意 <text @click="go('/pages/board/notes')">《用户报名须知信息》</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllChoose: false,
				id: "", //活动id
				shopid: "", //门店id
				phonenumber: "",
				name:"",
				adress:"",
				distance:"",
				tel:"",
				time_range:""
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.shopid = options.shopid
			this.distance = options.distance
			this.tel = options.tel
			this.time_range = options.time_range
			this.name = decodeURIComponent(options.name)
			this.adress = decodeURIComponent(options.address)
		},
		methods: {
			//手机号授权
			getPhoneNumber(e) {
				console.log(e)
				var that = this
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'alipay',
						scopes: ['auth_base'],
						success: function(loginRes) {
							console.log(loginRes)
							that.rq.getData('Wechat/getPhone', {
								encryptedData: e.detail.encryptedData,
								code: loginRes.code,
								iv: e.detail.iv,
							}).then((res) => {
								if (res.code == 1) {
									that.phonenumber = res.data.phoneNumber
								}
							})
						}
					})

				}
			},
			getSgin() {
				if (this.phonenumber == '') {
					this.cn.alert('请输入联系电话')
					return false
				}
				if(this.isAllChoose==false){
					this.cn.alert('请阅读并同意《用户报名须知信息')
					return false
				}
				this.rq.getData('Activitie/addActivity',{
					shop_id:this.shopid,
					activity_id:this.id,
					phone:this.phonenumber
				}).then(res=>{
					if(res.code==1){
						this.cn.alert('报名成功').then(res=>{
							uni.navigateBack({
								delta:2
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.lineactive {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #000000;
		border-radius: 50%;
	}

	.line {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #d9d9d9;
		border-radius: 50%;
	}

	.phonebtn {
		width: 302rpx;
		height: 72rpx;
		/* box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66,66,67,0.25); */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #101010;
		font-size: 28rpx;
		color: #101010;
		line-height: 72rpx;
		text-align: center;
		background: none;
		margin: 20rpx auto 0;
	}

	.border-bottom-f7 {
		border-bottom: 1rpx solid #F7F7F7;
	}

	.sginbtn {
		width: 690rpx;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 210rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.xytext {
		font-size: 28rpx;
		color: #999999;
		position: absolute;
		bottom: 132rpx;
		left: 30rpx;
	}
</style>